<template>
  <div>
    <el-page-header @back="goBack" content="新增优惠券礼品兑换" style="color:#3198ff"></el-page-header>
    <div style="margin-top: 30px;">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <span class="title">礼品名称</span>
            <el-input placeholder="请输入名称" v-model="param.data.name"></el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="form-item button-container">
            <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="resetSearchCotnet" icon="el-icon-refresh">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-top: 50px;">
      <el-table
        ref="multipleTable"
        :row-key="getRowKey"
        border
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"

      >
        <el-table-column prop="name" label="礼品名称"></el-table-column>
        <el-table-column prop="type" label="类型" :formatter="(row) => { return row.type == 1 ? '商城商品' : '非商城商品' }"></el-table-column>
        <el-table-column prop="url" label="图片">
          <template slot-scope="scope">
            <template>
              <el-image class="banner-image" fit="cover" :src="scope.row.pic"></el-image>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="stock" label="库存"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column type="selection" width="100" :reserve-selection="true" align="center"></el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @current-change="currentPageChange"
          layout="prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="form-item">
            <span class="title">
              <span style="color:#F56C6C">*</span>优惠券名称
            </span>
            <el-input placeholder="请输入" maxlength="50" v-model="couponName"></el-input>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <span class="title">
              <span style="color:#F56C6C">*</span>类型
            </span>
            <el-select v-model="value" style="width:100%" placeholder="请选择">
              <el-option
                v-for="item in productOptions2"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="form-item">
            <span class="title">
              <span style="color:#F56C6C">*</span>有效日期
            </span>
            <el-date-picker
              v-model="adddateList"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :clearable="false"
            ></el-date-picker>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="form-item">
            <span class="title">
              <span style="color:#F56C6C">*</span>数量
            </span>
            <el-input-number
              placeholder="请输入"
              v-model="number"
              :min="0"
              :precision="0"
              :step="1"
              controls-position="right"
            ></el-input-number>
          </div>
        </el-col>
      </el-row>
      <div style="text-align:center; margin-top: 50px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      productOptions2: [
        { id: "4", title: "礼品兑换卷" }
      ], //添加商品类型
      param: {
        data: {
          name: "", // 优惠券名称
        },
        queryRequest: {
          pageNum: 1,
          pageSize: 10
        }
      },
      tableData: [],
      total: 1,
      value: "4",
      multipleSelection: [], //商品选中集合
      couponName: "", //优惠券名称
      adddateList: "", //有效时间
      number: "" //数量
    };
  },
  components: {},
  computed: {},
  beforeMount() {},
  mounted() {
    this.goodData();
  },
  methods: {
    cellclass(row) {
      if (row.columnIndex === 5) {
        return "DisabledSelection";
      }
    },
    getRowKey(row) {
      return row.id;
    },
    goodData() {
      this.$service.tzGiftSelectTzGift(this.param).then(res => {
        if (res.code == "00000") {
           if (
            res.data.rows.length == 0 &&
            this.param.queryRequest.pageNum != 1
          ) {
            this.param.queryRequest.pageNum -= 1;
            this.goodData();
          }
          this.tableData = (res.data && res.data.rows) || [];
          this.total = res.data.total || 0;
        }
      });
    },
    search() {
      this.param.queryRequest.pageNum = 1;
      this.goodData();
    },
    resetSearchCotnet() {
      //重置搜索条件
      this.param.data.name = "";
      this.param.queryRequest.pageNum = 1;
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];
      for (let i = 0; i < val.length; i++) {
        const element = val[i];
        this.multipleSelection.push(element.id);
      }
    },
    currentPageChange(e) {
      this.param.queryRequest.pageNum = e;
      this.goodData();
    },
    goBack() {
      this.$router.back();
    },
    submitForm() {
      var param = {};
      param.userId = this.Global.user.userId;
      if (this.couponName == "") {
        this.$message({
          message: "请填写优惠券名称",
          type: "warning"
        });
        return;
      } else {
        param.name = this.couponName;
      }
        param.type =this.value;
      if (this.number == "") {
        this.$message({
          message: "请填写优惠券数量",
          type: "warning"
        });
        return;
      }
      let boolean = new RegExp("^[1-9][0-9]*$").test(this.number);
      if (!boolean) {
        this.$message({
          message: "请输入优惠券数量为正整数且不能为0",
          type: "warning"
        });
        return;
      }
      param.tock = this.number;
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: "请选择要添加的商品",
          type: "warning"
        });
        return;
      } else {
        param.puId = this.multipleSelection.join(",");
      }
       if (this.adddateList.length > 0) {
        param.startTime = this.adddateList[0];
        param.endTime = this.adddateList[1];
      } else {
        this.$message({
          message: "请填写有效日期",
          type: "warning"
        });
        return;
      }
      console.log(param);
      this.$service.couponAdd(param).then(res => {
        if (res.code == "00000") {
          this.$message({
            message: "添加成功",
            type: "success"
          });
          this.$router.back();
        } else {
          this.$message({
            message: res.message,
            type: "warning"
          });
        }
      });
    }
  },
  watch: {}
};
</script>
<style scoped>
.fullcs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 10px;
}
.el-table /deep/.el-checkbox__inner {
  width: 20px;
  height: 20px;
}
.el-table /deep/.el-checkbox__inner::after {
  height: 10px;
  left: 6px;
}

.el-table /deep/ .el-table__header .el-table-column--selection .cell .el-checkbox:after {
  color: #909399;
  content: "全选";
  font-size: 14px;
  margin-left: 12px;
}
</style>